import echarts from "../chartHooks/echarts";
import type { EChartsOption } from "echarts";

export const leftBottomConfig = (xData: any, yData: any): EChartsOption => ({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    formatter: (params: any) => {
      return `<div class="tooltip">
              <span>${params[0].axisValue}</span></br>
              <span style="display:inline-block;height: 10px;width:10px;border-radius: 100%;background-color: #48FF3BE2;margin-right: 2px"></span>图表: ${params[0].value}
            </div>`;
    },
  },
  animation: false,
  grid: {
    left: "2%",
    right: "2%",
    top: "4%",
    bottom: "2%",
    containLabel: true,
  },
  xAxis: {
    data: xData,
    axisLine: {
      show: true, //隐藏X轴轴线
      lineStyle: {
        color: "#11417a",
      },
    },
    axisTick: {
      show: false, //隐藏X轴刻度
    },
    axisLabel: {
      show: true,
      fontSize: 14,
      color: "#f5f9ff", //X轴文字颜色
      rotate: 60,
    },
  },
  yAxis: [
    {
      type: "value",
      gridIndex: 0,
      min: 0,
      max: 100,
      interval: 25,
      // splitNumber: 4,
      splitLine: {
        show: true,
        lineStyle: {
          color: "#113763",
          width: 1,
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#11417a",
        },
      },
      axisLabel: {
        show: true,
        margin: 14,
        fontSize: 14,
        color: "#ffffff", //X轴文字颜色
      },
    },
  ],
  series: [
    {
      // 值
      name: "采集覆盖率情况",
      type: "bar",
      barWidth: 30,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgb(72,255,59)",
          },
          {
            offset: 1,
            color: "rgba(15,38,35,0.2)",
          },
        ]),
      },
      data: yData,
      z: 10,
      zlevel: 2,
      // label: {
      //   show: true,
      //   position: "top",
      //   distance: 10,
      //   fontSize: 16,
      //   fontFamily: "DIN",
      //   color: "#ffffff",
      //   zlevel: 4,
      //   z: 10,
      //   formatter: "{c}%",
      // },
    },
    {
      // 值分隔
      type: "pictorialBar",
      itemStyle: {
        color: "#0F375F",
      },
      symbolRepeat: "fixed",
      symbolMargin: 3,
      symbol: "rect",
      symbolClip: true,
      symbolSize: [30, 3],
      symbolPosition: "start",
      symbolOffset: [0, -1],
      // symbolBoundingData: this.total,
      data: [88.6, 88.9, 89, 88.8, 88.8, 20, 20, 20, 20],
      z: 0,
      zlevel: 3,
    },
    {
      //辅助背景图形
      name: "背景条",
      type: "bar", //pictorialBar
      barWidth: "30",
      barGap: "-100%",
      itemStyle: {
        borderWidth: 0,
        color: "rgba(146,158,48,0.2)",
        borderRadius: 10,
      },
      data: [100, 100, 100, 100, 100, 100, 100, 100, 100],
      z: 0,
      zlevel: 0,
    },
    {
      // 背景分隔
      type: "pictorialBar",
      itemStyle: {
        color: "#0F375F",
      },
      symbolRepeat: "fixed",
      symbolMargin: 3,
      symbol: "rect",
      symbolClip: true,
      symbolSize: [30, 3],
      symbolPosition: "start",
      symbolOffset: [0, -1],
      // symbolBoundingData: this.total,
      data: [100, 100, 100, 100, 100, 100, 100, 100, 100],
      z: 0,
      zlevel: 1,
    },
  ],
});
